@import "@/styles/__index.less";

.person-stat {
  height: 100%;
  display: flex;
  flex-direction: column;

  .wrap-1 {
    flex: 1;
    padding: 0px 30px;
    //margin-bottom: 16px;
    display: flex;
    align-items: center;
    background-image: url("@/assets/attend-l2-bg-1.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    .icon {
      width: 56px;
      height: 56px;
      background-image: url("@/assets/attend-l2-icon-11.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .line {
      flex: 1;
      height: 40px;
      margin: 0px 6px;
      background-image: url("@/assets/attend-l2-line.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .stat-box {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      align-items: flex-end;

      .number {
        .pmzd-orange;
        font-size: 36px;
      }
    }
  }

  .wrap-2 {
    flex: 1;
    display: flex;
    gap: 20px;
    [class^="wrap-2"] {
      flex: 1;
      line-height: 1em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("@/assets/attend-l2-bg-2.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;

      .icon {
        width: 25px;
        height: 30px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      .number {
        .pmzd-blue;
        font-size: 20px;
        margin: 6px 0px;
      }
    }

    .wrap-21 .icon {
      background-image: url("@/assets/attend-l2-icon-21.png");
    }

    .wrap-22 .icon {
      background-image: url("@/assets/attend-l2-icon-22.png");
    }

    .wrap-23 .icon {
      background-image: url("@/assets/attend-l2-icon-23.png");
    }
  }
}
